/**
    首页 page
    lbj 2018.6.7
 */

<style lang="scss" scoped>
.index {
  #swiper {
    li {
      &:first-child .btn {
        left: 58.5%;
      }
      &:last-child .btn {
        left: 46.5%;
      }
      .btn {
        background: #1054ff;
        padding: 10px 30px;
        top: 60%;
        left: 9.5%;
      }
    }
  }
}
</style>

<template>
  <div class="index">

    <!-- Swiper -->
    <div class="swiper-container" id="swiper">
      <ul class="swiper-wrapper">
        <li v-for="it in banner" :key="it.id" class="position-r swiper-slide">
          <img :src="it.img" class="w100" alt="">
          <div class="btn position-a box-center bor-r5 cfff">了解更多</div>
        </li>
      </ul>
      <!-- Add Pagination -->
      <div class="swiper-pagination swiper-pagination-white"></div>
      <!-- Add Arrows -->
      <!-- <div class="swiper-button-next swiper-button-white"></div> -->
      <!-- <div class="swiper-button-prev swiper-button-white"></div> -->
    </div>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.min.css";
import Swiper from "swiper";
export default {
  name: "index",
  data() {
    return {
      banner: [
        { id: 1, img: require("../img/2.png"), has: 0 },
        { id: 2, img: require("../img/1.png"), has: 0 },
        { id: 3, img: require("../img/3.png"), has: 0 }
      ],
      indexStatus: 0
    };
  },
  watch: {
    indexStatus(i) {}
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.swiperInit();
    });
  },
  methods: {
    //初始化swiper
    swiperInit() {
      let that = this;

      new Swiper(".swiper-container", {
        autoplay: 5000, //可选选项，自动滑动
        autoplay: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        spaceBetween: 50,
        effect: "fade",
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        on: {
          slideChangeTransitionStart: function() {
            console.log('123')
            that.$store.commit('setIndexStatus', this.activeIndex);
          },
          slideChangeTransitionEnd: function() {
            let i = (that.indexStatus = parseInt(this.activeIndex)); //切换结束时，告诉我现在是第几个slide
          }
        }
        // navigation: {
        //   nextEl: ".swiper-button-next",
        //   prevEl: ".swiper-button-prev"
        // }
      });
    }
  }
};
</script>


